<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <!-- 引入chapter组件样式 -->
    <link rel="stylesheet" href="../../widget/components/wrong/index.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
		 */
      .chapter-hr {
        border-bottom: 1px solid rgba(200, 200, 200, 0.3);
      }
      /* 刷新按钮样式 换成图标后删除 */
      .chapter-replay {
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 50%;
      }
      /* 控制刷新过渡 */
      .notransform {
        transition: none;
        transform: rotate(0deg);
      }
      .transform {
        transition: 1s;
        transform: rotate(720deg);
      }

      /* 右边箭头的样式 */
      .van-collapse-item__title .van-cell__right-icon::before {
        transform: rotate(0deg);
      }
      .van-collapse-item__title--expanded .van-cell__right-icon::before {
        transform: rotate(90deg);
      }

      /* 去除组件的padding */
      /* [class*='van-hairline']::after {
        border: none;
      } */
      .van-cell:not(:last-child)::after {
        /* border: 1px solid rgba(232, 234, 237, 1); */
        margin-right: 0.32rem;
      }
      .van-cell {
        height: 0.96rem;
        padding: 0 0.32rem;
        font-size: 0.3rem;
        color: rgba(50, 50, 51, 1);
      }
      .van-cell__title {
        height: 100%;
        line-height: 0.96rem;
      }
      .van-cell__right-icon {
        height: 0.96rem;
        line-height: 0.96rem;
      }
      /* .van-collapse-item__wrapper {
        height: 0.96rem;
      } */
      .van-collapse-item__content {
        height: 100%;
        padding: 0;
      }

      .wrong-test-no {
        height: 1.5rem;
        width: 100%;
        background-color: #fff;
        font-size: 0.3rem;
        text-align: center;
        line-height: 1.5rem;
      }
      .wrong-test-no-level {
        background-color: #fff;
      }
      .van-collapse-item:last-child .chapter-container:last-child {
        border: none;
      }
      .chapter-container:last-child {
        border: none;
      }
      .wrong-test-no-level .chapter-container:last-child {
        border: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- *********************** 头 *******************************-->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">{{ title }}</div>
            <div class="header-right">
              <!-- 此处需换成 icon -->
              <div></div>
            </div>
          </div>
        </div>
      </div>
      <!--************************** 内容 *************************-->
      <div class="page-content">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div class="chapter-hr"></div>
        <!-- 有目录结构 -->
        <div v-if="showWhatType">
          <van-collapse v-model="firstActiveName" accordion>
            <van-collapse-item
              v-for="(item, index) of chapterData"
              :name="String(index)"
              :key="index"
            >
              <div slot="title">{{ item.chaptername }}</div>
              <div>
                <zl-wrong
                  v-for="(items,i) of item.crds"
                  :item="items"
                  :num="i"
                  :key="i"
                  @click.native="goToDoTest(items.paper_id,items.papname)"
                ></zl-wrong>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
        <!-- 没有目录结构 -->
        <div v-else class="wrong-test-no-level">
          <zl-wrong
            v-for="(items,i) of chapterData"
            :item="items"
            :num="i"
            :key="i"
            @click.native="goToDoTest(items.paper_id,items.papname)"
          ></zl-wrong>
        </div>
        <div v-if="isHaveRecord" class="wrong-test-no">暂无记录</div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/exam.service.js"></script>
    <script src="../../common/js/utils.js"></script>
    <!-- 引入chapter组件 -->
    <script src="../../widget/components/wrong/index.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      //  注册 Collapse 组件
      Vue.use(vant.Collapse).use(vant.CollapseItem)
      //  注册 Cell 组件
      Vue.use(vant.Cell).use(vant.CellGroup)

      new Vue({
        el: '#app',
        components: {
          'zl-wrong': wrong
        },
        data: {
          // 控制刷新按钮旋转
          noTransform: true,
          // 控制刷新按钮过渡
          transform: false,
          // 控制手风琴展开的是哪个
          firstActiveName: '',
          // 请求回来的数据是否有目录结构
          showWhatType: true,
          //  章节练习数据
          chapterData: [],
          // type 为1为错题相关 为2时收藏相关
          type: '',
          title: '',
          queryObj: '',
          isHaveRecord: false,
          cateid: Number,
          queryType: Number,
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          goBack() {
            location.href = `./wrong.html?cateid=${this.cateid}&&type=${this.queryType}`
          },
          goToDoTest(paperId, title) {
            if (Number(this.type) === 1) {
              location.href = `./exercise.html?id=${paperId}&&where=2&&title=${title}&&obj=${this.queryObj}`
            }
            if (Number(this.type) === 2) {
              location.href = `./exercise.html?id=${paperId}&&where=3&&title=${title}&&obj=${this.queryObj}`
            }
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          this.cateid = queryObj.cateid
          this.type = queryObj.type
          this.queryObj = JSON.stringify(queryObj)
          this.queryType = Number(queryObj.type)
          if (Number(queryObj.type) === 1) {
            this.title = '错题本'
            examService.getWrongList(queryObj).then(res => {
              this.chapterData = res
              this.isShowZLLoading = false
              if (res.length === 0) {
                this.isHaveRecord = true
              }
              let data = res[0] || {}
              if (data.ischapter === 1) {
                this.showWhatType = true
              } else {
                this.showWhatType = false
              }
            })
          }
          if (Number(queryObj.type) === 2) {
            this.title = '收藏'
            examService.getCollectList(queryObj).then(res => {
              this.chapterData = res
              this.isShowZLLoading = false
              if (res.length === 0) {
                this.isHaveRecord = true
              }
              let data = res[0] || {}
              if (data.ischapter === 1) {
                this.showWhatType = true
              } else {
                this.showWhatType = false
              }
            })
          }
        }
      })
    </script>
  </body>
</html>
